<template>
    <div>
        <el-card>
            <template #header>
                <div class="card-header flex justify-between">
                    <span>{{ $route.meta.title }}</span>
                    <el-button type="primary" @click="handleEdit('add')">新增</el-button>
                </div>
            </template>

            <el-table :data="pageData.lists" row-key="id" size="large" v-loading="pageData.loading"
                style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="name" label="角色名称" width="180"/>
                <el-table-column prop="remark" label="角色描述" width="200"/>
                <el-table-column prop="status" label="状态" >
                    <template #default="{ row }">
                        <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                            {{ row.status === 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" >
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit('edit', scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

                <template #empty>
                    <el-empty description="还未添加任何角色" />
                    <el-button type="primary" @click="handleEdit('add')">添加角色</el-button>
                </template>
            </el-table>

            <Pagination v-model:modelValue="pageData" @change="requestData" />
        </el-card>

        <Edit ref="editComponent" @success="requestData" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRoleList } from '@/api/system/rbac/role'
import { usePaging } from '@/utils/hooks/usePaging'
import { onMounted } from 'vue'
import Edit from './components/edit.vue'

const editComponent = ref<InstanceType<typeof Edit>>()

const searchForm = ref({
    pageType: 0
})

const { pageData, requestData } = usePaging({
    fetchFunc: getRoleList,
    params: searchForm.value
})

const handleEdit = (type: 'edit' | 'add', row?: any) => {
    editComponent.value?.open(type)
    editComponent.value?.setFormData(row)
}

const handleDelete = (row: any) => {
    console.log('删除', row)
}

onMounted(() => {
    requestData()
})
</script>

<style scoped lang="scss"></style>
